<template>
  <view class="theme-container">
    <view class="header">
      <text class="title">趣味九宫格</text>
      <view class="stars">
        <text>⭐ {{ stars }}</text>
      </view>
    </view>

    <view class="themes-grid">
      <view 
        v-for="theme in themes" 
        :key="theme.id"
        class="theme-card"
        :class="{ 'selected': selectedTheme === theme.id }"
        @tap="selectTheme(theme.id)"
      >
        <image :src="theme.icon" mode="aspectFit" class="theme-icon" />
        <text>{{ theme.name }}</text>
      </view>
    </view>

    <view class="difficulty-selector" v-if="selectedTheme">
      <text class="subtitle">选择难度</text>
      <view class="difficulty-buttons">
        <button 
          v-for="level in difficultyLevels"
          :key="level.id"
          :class="['difficulty-btn', { 'active': level.id === selectedDifficulty }]"
          @tap="selectDifficulty(level.id)"
        >
          {{ level.name }}
        </button>
      </view>
      
      <button 
        class="start-btn" 
        type="primary"
        @tap="startGame"
      >
        开始游戏
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stars: 0,
      themes: [
        { id: 'colors', name: '颜色', icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/game/themes/colors.png' },
        { id: 'fruits', name: '水果', icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/game/themes/fruits.png' },
        { id: 'animals', name: '动物', icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/game/themes/animals.png' },
        { id: 'numbers', name: '数字', icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/game/themes/numbers.png' }
      ],
      difficultyLevels: [
        { id: 'easy', name: '简单' },
        { id: 'medium', name: '中等' },
        { id: 'hard', name: '困难' }
      ],
      selectedTheme: '',
      selectedDifficulty: 'easy'
    }
  },

  onShow() {
    // 加载星星数
    const gameProgress = uni.getStorageSync('gameProgress')
    if (gameProgress) {
      this.stars = gameProgress.stars || 0
    }
  },

  methods: {
    selectTheme(themeId) {
      this.selectedTheme = themeId
      // 播放选择音效
      this.playSound('select')
    },

    selectDifficulty(difficultyId) {
      this.selectedDifficulty = difficultyId
      // 播放选择音效
      this.playSound('select')
    },

    startGame() {
      if (!this.selectedTheme) {
        uni.showToast({
          title: '请选择主题',
          icon: 'none'
        });
        return;
      }

      const url = `/pages/game/play?theme=${this.selectedTheme}&difficulty=${this.selectedDifficulty}`;
      
      // 使用Promise包装导航操作
      new Promise((resolve, reject) => {
        uni.navigateTo({
          url,
          success: resolve,
          fail: reject
        });
      })
      .then(res => {
        // 成功跳转后，通过事件通道传递数据
        if (res.eventChannel) {
          res.eventChannel.emit('gameConfig', {
            theme: this.selectedTheme,
            difficulty: this.selectedDifficulty
          });
        }
      })
      .catch(err => {
        console.error('Navigation failed:', err);
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        });
      });
    },

    playSound(type) {
      const innerAudioContext = uni.createInnerAudioContext()
      innerAudioContext.src = `https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/game/sounds/${type}.mp3`
      innerAudioContext.play()
    }
  }
}
</script>

<style lang="scss">
.theme-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  .stars {
    font-size: 36rpx;
    color: #FFB800;
  }
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.theme-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &.selected {
    border: 4rpx solid #007AFF;
    transform: scale(1.05);
    background-color: #E6F0FF;
  }
  
  .theme-icon {
    width: 120rpx;
    height: 120rpx;
  }
  
  text {
    font-size: 32rpx;
    color: #333;
  }
}

.difficulty-selector {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  
  .subtitle {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .difficulty-buttons {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;
  }
  
  .difficulty-btn {
    flex: 1;
    font-size: 28rpx;
    background: #f0f0f0;
    border: none;
    
    &.active {
      background: #007AFF;
      color: #fff;
    }
  }
  
  .start-btn {
    width: 100%;
    background: #007AFF;
    margin-top: 20rpx;
    font-size: 32rpx;
  }
}
</style> 